import { Modal, Button, Row, Col } from 'antd';
import { FC, useMemo } from 'react';

import { ViewDialogProps } from './interface';
import { Description, DescriptionList } from '../../slice-file-upload/modal/description-list';

import { LeftOutlined, RightOutlined } from '@ant-design/icons';

import { isFunction } from 'lodash';
import { getPathValue } from '../../_common/valueUtil';

import './index.less';
import useIndexes from '@/biz-components/hooks/useIndexes';
import ImgView from '@/biz-components/img-view';

const ViewDialog: FC<ViewDialogProps> = ({
  visible,
  onCancel,
  title,
  index,
  columns,
  dataSource,
  descriptionListProps,
}) => {
  const { length } = dataSource;
  const lastIndex = useMemo(() => {
    return length - 1;
  }, [length]);

  const [current, prev, next] = useIndexes(index, lastIndex);

  const record = useMemo(() => {
    return dataSource[current];
  }, [current, dataSource]);

  const { imgSrc } = record;

  return (
    <Modal
      title={title}
      visible={visible}
      onCancel={onCancel}
      width={1300}
      closable
      maskClosable
      bodyStyle={{
        overflowY: 'auto',
      }}
      footer={null}
    >
      <section className="prev-next-nav">
        {prev ? (
          <Button className="prev" disabled={current === 0} onClick={prev}>
            <LeftOutlined /> 上一条
          </Button>
        ) : null}
        {next ? (
          <Button className="next" disabled={current === lastIndex} onClick={next}>
            下一条 <RightOutlined />
          </Button>
        ) : null}
      </section>

      <Row>
        <Col span={16}>
          <ImgView images={imgSrc} height={450} width="100%" />
        </Col>
        <Col span={8}>
          <DescriptionList {...descriptionListProps}>
            {columns?.map((item, index) => {
              const { render, dataIndex, title, descriptionProps } = item;
              const text = getPathValue<any, any>(record, dataIndex);
              return (
                <Description label={title} {...descriptionProps}>
                  {isFunction(render) ? render(text, item, index) : text}
                </Description>
              );
            })}
          </DescriptionList>
        </Col>
      </Row>
    </Modal>
  );
};

export default ViewDialog;
